<template>
  <div
    v-if="!loading"
    class="vc-app-list-nav-text"
    :style="visual.parseStyle(compStyle)"
  >
    <div
      v-if="dataList && dataList.length > 0"
      class="vc-app-list-nav-text-list"
    >
      <div
        v-for="(data, index) in dataList"
        :key="index"
        class="vc-app-list-nav-text-item"
        :style="data['主键'] === currValue ? getActiveStyle() : getInactiveStyle()"
      >{{data["名称"]}}</div>
    </div>
    <div
      v-if="dataList && dataList.length > 0"
      class="vc-app-list-nav-text-icon"
    >
      <ac-icon iconId="0197e491a5b4194b6032" size="14" />
    </div>
    <div
      v-else
      class="vc-app-list-nav-text-empty"
      :style="visual.parseStyle(compStyle)"
    >
      <span style="margin-top: 20px;">暂无数据</span>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, nextTick, onMounted} from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const dataList = ref([]);
const loading = ref(true);
const currValue = ref('');

const getActiveStyle = () => {
  let result = '';
  if (currNode.value.currCompStyle['fontSize']) {
    result += 'font-size: ' + currNode.value.currCompStyle['fontSize'] + 'px;';
  }
  if (currNode.value.currCompStyle['activeColor']) {
    result += 'color: ' + currNode.value.currCompStyle['activeColor'] + ';';
  }
  result += 'font-weight: bolder;';
  return result;
};

const getInactiveStyle = () => {
  let result = '';
  if (currNode.value.currCompStyle['fontSize']) {
    result += 'font-size: ' + currNode.value.currCompStyle['fontSize'] + 'px;';
  }
  if (currNode.value.currCompStyle['inactiveColor']) {
    result += 'color: ' + currNode.value.currCompStyle['inactiveColor'] + ';';
  }
  return result;
};

const init = async() => {
  loading.value = true;
  if (currNode.value.compData.dataSourceType === '') {
    currNode.value.compData.dataSourceType = '静态数据';
  }
  await nextTick(() => loading.value = false);
};

const loadData = async() => {
  dataList.value = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList.value);
  currValue.value = dataList.value.length > 0 ? dataList.value[0]['主键'] : '';
};

watch(() => props.node.compData?.refresh, () => {
  loadData();
});

onMounted(() => {
  init();
  loadData();
});
</script>

<style scoped lang="scss">
.vc-app-list-nav-text {
  width: 100%;
  display: flex;
  flex-direction: row;
  .vc-app-list-nav-text-list {
    width: 1px;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: auto;
    .vc-app-list-nav-text-item {
      padding: 0 8px;
      white-space: nowrap;
    }
  }
  .vc-app-list-nav-text-list::-webkit-scrollbar {
    display: none;
  }
  .vc-app-list-nav-text-icon {
    width: 30px;
    margin-left: 10px;
    border-left: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vc-app-list-nav-text-empty {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>